<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>代理管理</el-breadcrumb-item>
            <el-breadcrumb-item>代理列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="whole-flex-center-between whole-top-handle">
                <div class="search-area">
                    <el-button size="small" @click="clearFilter" style="margin-right:20px">重置所有筛选</el-button>
                    <el-select size="small" v-model="statusValue" class="margin-r-5" placeholder="选择商户状态" :popper-append-to-body="false">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <!-- <el-col :span="4" class="margin-r-5">
                        <el-input size="small" v-model="nameValue" placeholder="要查询的商户名" clearable></el-input>
                    </el-col> -->
                    <el-button size="small" @click="getUserList(1,statusValue)">查询</el-button>
                </div>
            </div>
            <el-row>
                <el-button size="small" type="primary" @click="addAgentDialogVisible = true">新增</el-button>
            </el-row>
            <div class="whole-flow-table-box">
                <el-table ref="myTable" :data="userList" style="width: 100%" stripe border>
                    <el-table-column align="center" type="selection" width="50"></el-table-column>
                    <el-table-column align="center" prop="id" label="UID" width="60"></el-table-column>
                    <el-table-column align="center" prop="admin_user.account" label="登录账号"></el-table-column>
                    <el-table-column align="center" prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column align="center" prop="link_man" label="联系人" width="100"></el-table-column>
                    <el-table-column align="center" prop="mobile" label="联系方式"></el-table-column>
                    <el-table-column align="center" prop="money" label="佣金" width="150"></el-table-column>
                    <el-table-column align="center" prop="rate" label="费率" width="80"></el-table-column>
                    <el-table-column align="center" prop="status" label="状态" width="70">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status==0" type="info" size="mini">待审</el-tag>
                            <el-tag v-else-if="scope.row.status==1" type="success" size="mini">成功</el-tag>
                            <el-tag v-else type="danger" size="mini">失败</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="create_time" label="创建时间"></el-table-column>
                    <el-table-column align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <span>{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="whole-pagination">
                    <el-pagination :page-size="size" background layout="prev, pager, next" :total="count" @current-change="currentPage"></el-pagination>
                </div>
                <el-dialog title="添加代理" :visible.sync="addAgentDialogVisible" width="500px" :before-close="handleClose">
                    <div>
                        <el-form ref="addAgentRef" :rules="addAgentRules" :model="addAgentFrom" label-width="150px">
                            <el-form-item label="代理商名称：" prop="name">
                                <el-input v-model="addAgentFrom.name"></el-input>
                            </el-form-item>
                            <el-form-item label="代理商电话：" prop="mobile">
                                <el-input v-model="addAgentFrom.mobile"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人：" prop="link_man">
                                <el-input v-model="addAgentFrom.link_man"></el-input>
                            </el-form-item>
                            <el-form-item label="费率：" prop="rate">
                                <el-input v-model="addAgentFrom.rate"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addAgentDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmAddAgent(addAgentFrom)">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userList: [],
            count: 0,
            size: 10,
            page: 1,
            imgList: [],
            // 可搜索的状态列表
            statusOptions: [
                {
                    value: 0,
                    label: "待审",
                },
                {
                    value: 1,
                    label: "成功",
                },
                {
                    value: 2,
                    label: "失败",
                },
            ],
            statusValue: '',
            // 添加代理上弹框显隐
            addAgentDialogVisible: false,
            // 添加代理商form表单
            addAgentFrom: {},
            addAgentRules: {
                name: [
                    { required: true, message: '请输入代理商名字', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请输入代理商手机号', trigger: 'blur' },
                ],
                link_man: [
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                ],
                rate: [
                    { required: true, message: '请输入费率', trigger: 'blur' },
                ]
            }
        };
    },
    created() {
        this.getUserList(1);
    },
    methods: {
        // 重置筛选
        clearFilter() {
            this.$refs.myTable.clearFilter();
            this.statusValue = "";
            // this.nameValue = "";
            this.getUserList(1);
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },
        // 获取代理商列表列表
        getUserList(page, status) {
            let _this = this;
            this.$axios({
                url: "/admin/master/getAgent",
                data: {
                    offset: page,
                    limit: this.size,
                    status: status == undefined ? '' : status
                },
                success(res) {
                    if (res.data.code == 200) {
                        _this.userList = res.data.content.data;
                        _this.count = Number(res.data.content.count);
                    }
                },
            });
        },
        currentPage(page) {
            // if (_this.statusValue == undefined) {
            //     sta = 0;
            // } else {
            //     sta = _this.orderExcelStatus;
            // }
            this.getUserList(page, this.statusValue);
        },
        confirmAddAgent(form) {
            let _this = this;
            this.$refs['addAgentRef'].validate((valid) => {
                if (valid) {
                    _this.$axios({
                        url: "/admin/master/setAgent",
                        data: {
                            name: form.name,
                            mobile: form.mobile,
                            link_man: form.link_man,
                            account:form.mobile,
                            password:123456,
                            rate:form.rate
                        },
                        needToken: false,
                        success(res) {
                            if (res.data.code == 200) {
                                _this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                });
                                _this.$refs.addAgentRef.resetFields();
                                _this.addAgentDialogVisible=false;
                                this.getUserList(1);
                            }else{
                                _this.$message.error(res.data.msg);
                            }
                        },
                    });
                }
            });
        }
    },
};
</script>
<style scoped>
.shrink-box {
    width: 100%;
    font-size: 0;
}
.shrink-box >>> label {
    width: 140px;
    color: #99a9bf;
}
.shrink-box .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33.333333%;
}
.a {
    vertical-align: middle;
}
.imgs-con {
    height: 450px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}
.imgs-con > .card {
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
}
.imgs-con > .card:nth-child(4n) {
    margin-right: 0;
}
</style>